<!--
 * @Author: Null
 * @Date: 2022-05-26 10:14:55
 * @Description: 注册表单12
-->

<template>
  <MyDialog :visible="openDialog" @close="closeDialog()">
    <div slot="title">注册账号</div>
    <div slot="content" class="scroll-div-box1">
      <el-form
        ref="registerFormRef"
        label-position="top"
        :rules="rules"
        :model="registerForm"
        size="default"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="registerForm.userName"
            type="text"
            placeholder="输入用户名"
            name="username"
            clearable
            auto-complete="on"
          >
            <SvgIcon slot="prepend" name="admin" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="输入密码"
            name="password"
            auto-complete="new-password"
            show-password
            @keyup.enter.native="submit"
          >
            <SvgIcon slot="prepend" name="key" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="确认密码"
            name="password"
            auto-complete="new-password"
            show-password
            @keyup.enter.native="submit"
          >
            <SvgIcon slot="prepend" name="key" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="registerForm.code"
            type="text"
            placeholder="验证码"
          >
            <SvgIcon slot="prepend" name="verify" />
            <template slot="append">
              <div class="login-code">
                <ValidateCode
                  domId="registerCodeId"
                  @getValidateCode="validateCode = $event"
                />
              </div>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <MyButton @click="closeDialog()">取 消</MyButton>
      <MyButton type="primary" :loading="submitLoading" @click="submitFun()">
        确 定
      </MyButton>
    </div>
  </MyDialog>
</template>

<script>
import { checkPassword, checkUserName } from '@common/rules.js'
import common from '@/common/index'

let validateCode

const checkValidateCode = (rules, value, callback) => {
  common.validateFun(value, validateCode).then((res) => {
    if (res) {
      return callback()
    } else {
      return callback('验证码不正确')
    }
  })
}

export default {
  name: 'RegisterFormDialog',
  props: {
    openDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      submitLoading: false,
      validateCode: '',
      registerForm: {
        // 登陆表单
        userName: 'admin',
        password: '123456',
        code: ''
      },
      rules: {
        // 登陆验证规则
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 2,
            max: 16,
            message: '长度在 2 到 16 个字符',
            trigger: 'blur'
          },
          { validator: checkUserName, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
          },
          { validator: checkPassword, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: checkValidateCode, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    validateCode: function (newVal) {
      console.log('newVal', newVal)
      validateCode = newVal
      this.registerForm.code = newVal
    }
  },
  methods: {
    // 登录提交表单按钮
    submitFun() {
      console.log('登录提交表单')
      this.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          console.log('登录提交表单', this.registerForm)
        }
      })
    },
    // 关闭
    closeDialog() {
      this.$refs.registerFormRef?.resetFields()
      this.$emit('update:openDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
// 登录表单
.page-login--form {
  // 登录按钮
  .button-login {
    width: 100%;
  }
  // 输入框左边的图表区域缩窄
  .el-input-group__prepend {
    padding: 0px 0px;
  }
  .login-code {
    // height: 40px - 2px;
    // display: block;
    // margin: 0px -20px;
    // border-top-right-radius: 2px;
    // border-bottom-right-radius: 2px;
  }
}
</style>
